<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

</head>
<body>
    <div class="app">
        <h1>{{msg}}</h1>
        <h1>{{name}}</h1>
        
    </div>
    <script>
        /* 
        template配置项：
        ' '只能在一行中写
        ` `可以换行写
        1.Template后面指定的是模版语句，但是模版语句中只能有一个根节点
        2.只要data中的数据发生变化，模版语句就一定会重新编译（只要data变，Template就会重新渲染）
        3.如果使用Template配置项的话，指定挂载位置的元素就会被替换
        4.好消息：目前可以不使用template来编写模版语句，这些模版语句可以直接写到html标签中，vue框架能够找到并渲染
        5.如果直接将模版语句编写到html标签中，指定的挂载位置就不会被替换了

        关于$mount()方法挂载？
        也可以不使用$moount('#app')的方式进行挂载了
        在Vue中有一个配置项：el
        el配置项和$mount('#app')的作用是一样的
        el配置项的作用？
            告诉Vue实例去接管哪个容器



        验证一个Vue实例可以接管多个容器吗？
        不能，一个Vue实例只能接管一个容器，一旦接管到容器之后，即使后面有相同的容器，Vue也是不管的（一夫一妻制）
        


        */
         Vue.config.productionTip = false

        new Vue({
            el:'.app',
            // template:"<h1>{{msg}}</h1> <h1>hahahah</h1>",
            // template:`

            // <div>
            //     <h1>{{msg}}</h1>
            //     <h1>{{name}}</h1>
                
            // </div>
            
            // `,
            data:{
                msg:"hello",
                name:"world",

            }

       })
    //    .$mount('.app')
    </script>
    
</body>
</html>